<template>
  <div class="mendian">
    <!--1. 顶部导航栏 -->
  <van-nav-bar
    fixed
    :border=false
    title="门店详情"
    @click-left="onClickLeft"
    @click-right="showShare = true"
  >
  <!-- 1.顶部导航栏插槽 -->
  <template #left>
    <van-icon name="arrow-left" color="black"/>
  </template>
  <template #right>
    <img src="../assets/detail/share.png" width="15px">
  </template>
  </van-nav-bar> 
  <!-- 1.1导航栏分享功能 -->
  <van-share-sheet v-model="showShare" :options="options"/>
  <!-- 内容区域开始 -->
  <div class="content">
    <!-- 222222.tab切换轮播图片 -->
    <div class="swipeBox">
      <!-- 提升功能  嵌套轮播 -->
      <van-swipe @change="onChange"  ref="swipe" :loop="false">
        <van-swipe-item v-for="(image, ind) in String(this.Dobj.boyu_image).split(',').slice(0,8)" :key="ind">
          <img :src="image" width="100%">
        </van-swipe-item>
      </van-swipe>
      <div class="tabnav">
        <!-- "huaxing huaxingRun6" -->
        <ul :class="hx">
          <li @click="click('run1',0)">VR</li>
          <li @click="click('run2',1)">视频</li>
          <li @click="click('run3',2)">会客厅</li>
          <li @click="click('run4',3)">公寓外观</li>
          <!--点击 4 5 6才控制移动样式，得到滑动效果 -->
          <li @click="click('run5',4)">休闲区</li>
          <li @click="click('run6',5)">影音区</li>
          <li @click="click('run7',6)">空中花园</li>
          <li @click="click('run8',7)">餐吧</li>
          <hr id="hr" :class="onStyle" width="8px" color="orange">
        </ul>
      </div>
    </div>
    <!-- CCB建融家园泊寓 -->
    <div class="smBay">
      <br>
      <h3 v-text="Dobj.boyu_title"></h3>
      <p>
        <span>户型{{detailNum}}个</span>
        <span class='spanPrice'>
          <i v-text="String(Dobj.boyu_price).slice(0,-4)"></i> 
          <span v-text="String(Dobj.boyu_price).slice(-4)"></span>
        </span>
      </p>
      <br>
      <p>
        <span class="biaoqian">近地铁商圈</span>
        <span class="biaoqian">押一付三</span>
      </p>
    </div>
    <!--周边配套和交通 -->
    <div>
      <h3>周边配套和交通  <a href="javascript:;" @click="showPopup" class="ckjs">查看介绍 &gt;</a></h3>
      <div>
        <!-- 周边配套和交通功能 查看介绍 -->
        <van-popup v-model="showZB" position="bottom" 
          :style="{ height:'597px'}" popup-close-icon-size="8px">
          <!-- 内容 -->
          <div class="popup_content">
            <!-- 内容头部盒子 -->
            <div class="contentHeader">
               <h3><span  @click="closePopup">×</span> 周边介绍</h3>
            </div>
            <!-- 内容区域盒子 -->
            <div class="contentCenter" v-html="Dobj.boyu_jieshao"></div>
            <!-- 内容底部盒子 -->
            <div class="contentFoot">
              <div class="button" @click="closePopup">知道了</div>
            </div> 
          </div>
        </van-popup>
      </div>
      <div>
        <router-link to="/">
          <img src="../assets/detail/map.jpg" width="100%">
        </router-link>
        <p>
          <van-icon name="location"/> &nbsp;&nbsp;&nbsp;&nbsp;
          <strong v-text="Dobj.boyu_address"></strong>
        </p>
      </div>
    </div>
    <!-- 配套设施 -->
    <div style="margin-top:30px">
      <h3 style="margin:0">配套设施  <a href="javascript:;" @click="showPopup" class="ckjs">更多 &gt;</a></h3>
      <van-grid :border="false" icon-size="23px" :column-num="5">
        <van-grid-item v-for="(value,index) of arrr.slice(0,5)" :key="index" :icon="value.img" :text="value.text"  />
       </van-grid>
      <!-- 配套设施功能 更多 -->
      <van-popup v-model="showMore" position="bottom" 
        :style="{ height:'383px'}" popup-close-icon-size="8px">
        <!-- 内容 -->
        <div class="popup_content">
          <!-- 内容头部盒子 -->
            <div class="contentHeader More">
               <h3 style="top:45%"><span  @click="closePopup">×</span>配套设施</h3>
            </div>
            <!-- 内容盒子 -->
          <div class="contentCenter">
            <van-grid :border="false" icon-size="23px">
              <van-grid-item v-for="(value,index) of arrr" :key="index" :icon="value.img" :text="value.text"  />
            </van-grid>
          </div>
          <!-- 内容底部盒子 -->
            <div class="contentFoot">
              <div class="button" @click="closePopup">知道了</div>
            </div>
        </div>
      </van-popup>
    </div>
  </div>
  <!-- 门店户型 -->
    <div class="huaxing">
      <h3>门店户型  <router-link :to="{path:'/others',query:{Other_obj:JSON.stringify(Other_obj),tit:'门店户型'}}" class="ckjs">更多 &gt;</router-link></h3>
      <!-- 划行代码区 -->
      <ul class="slide-box">
        <li class="slide-item" v-for="(item,index) in Other_obj.slice(0,5)" :key="index">
          <p class="img-items" @click="jumpToDetail(item.boyu_quid)">
            <img :src="item.boyu_qhphoto" width="100%">
          </p>
          <p class="title" v-text="item.boyu_qhintroduce"></p>
          <p class="price">
            <span v-text="item.boyu_qhprice"></span>
          </p>
          <p class="art">
            <span v-text="item.boyu_qarea"></span>
          </p>
        </li>
      </ul>
    </div>
    <!-- 底部菜单 -->
    <div class="foot">
      <div>
        <div  @click="showPopupTel">
          <img src="../assets/detail/tel.png" height="12px">
          <p>电话咨询</p>
        </div>
        <div class="styleTel">
          <!-- 电话咨询功能 弹出电话 -->
          <van-popup v-model="showTel" position="bottom"
          :style="{ height:'138px'}">
          <!-- 内容部分 -->
            <div class="popup_content_Tel">
              <div>
                <span><van-icon name="phone" color="pink" size="28"/></span>
                呼叫 176 7453 5470  
              </div>
              <div @click="closePopupTel">取消</div>
            </div>
          </van-popup> 
        </div>
      </div>
      <router-link class="routerLink" to="/">在线预约</router-link>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 该门店下户型数
      detailNum:0,
      onStyle:{
        // 控制变色和位置true
        run1:false,
        run2:false,
        run3:false,
        run4:false,
        run5:false,
        run6:false,
        run7:false,
        run8:false,
      },
      hx:{
        // 控制点击移动
        huaxing:true,//页面效果只能为true
        huaxingRun1:false,
        huaxingRun2:false,
        huaxingRun3:false,
        huaxingRun4:false,
        huaxingRun5:false,
        huaxingRun6:false,
        huaxingRun7:false,
        huaxingRun8:false,
      },
      // axios接收数据
      Dobj:{},
      Other_obj:[],
      // 电话咨询功能 弹出电话
      showTel:false,
      //周边配套和交通功能 查看介绍
      showZB:false,
      // 配套设施功能 更多
      showMore: false,
      e_target:'',
      // 服务器数据
      arrr:[],
      //1.1 分享功能栏
      showShare: false,
      options: [
        {
          name: '微信',
          icon: 'wechat',
        },
        {
          name: '微信朋友圈',
          icon: 'wechat-moments',
        },
      ],
    };
  },
  methods: {
    // 电话咨询功能 弹出
    showPopupTel(){
      this.showTel=true;
    },
    closePopupTel(){
      this.showTel=false;
    },
    // 配套设施功能 更多 和 周边配套和交通功能 查看介绍共用方法
    showPopup(e) {
      //判断点击元素的内容，修改对应的控制是否弹出变量
      if(e.target.innerHTML=="更多 &gt;"){
        this.showMore = true;
        //获取点击元素内容,赋值给变量e_target
        this.e_target=e.target.innerHTML;
      }
      if(e.target.innerHTML=="查看介绍 &gt;"){
        this.showZB = true;
        //获取点击元素内容,赋值给变量e_target
        this.e_target=e.target.innerHTML;
      }
    },
    closePopup(){
      if(this.e_target=="更多 &gt;"){
        this.showMore = false;
      }
      if(this.e_target=="查看介绍 &gt;"){
        this.showZB = false;
      } 
    },
    //1.1 顶部导航栏返回首页
    onClickLeft() {
      this.$router.go(-1);
    },
    onChange(index) {
      let N=index+1;
      this.click('run'+N);
    },
    // runN控制样式参数，ind控制点击图片跳转
    click(runN,ind){
      // 点击控制图片跳转
      this.$refs.swipe.swipeTo(ind);
      //点击即初始化
      this.onStyle={
        run1:false,
        run2:false,
        run3:false,
        run4:false,
        run5:false,
        run6:false,
        run7:false,
        run8:false,
      };
      this.hx={
        // 控制点击移动样式，得到滑动效果
        huaxing:true,//页面效果只能为true
        huaxingRun1:false,
        huaxingRun2:false,
        huaxingRun3:false,
        huaxingRun4:false,
        huaxingRun5:false,
        huaxingRun6:false,
        huaxingRun7:false,
        huaxingRun8:false,
      };
      // 点谁就将谁hr的onStyle-class开关打开，得到短横线移动效果
      for(var key in this.onStyle){
        if(key==runN){
          this.onStyle[key]=true;
        }
      }
      //点run4 run5 run6 打开hx-class开关
        if(runN=='run1'){
          this.hx.huaxingRun1=true;
        }
         if(runN=='run2'){
          this.hx.huaxingRun2=true;
        }
         if(runN=='run3'){
          this.hx.huaxingRun3=true;
        }
        if(runN=='run4'){
          this.hx.huaxingRun4=true;
        }
         if(runN=='run5'){
          this.hx.huaxingRun5=true;
        }
         if(runN=='run6'){
          this.hx.huaxingRun6=true;
        }
        if(runN=='run7'){
          this.hx.huaxingRun7=true;
        }
        if(runN=='run8'){
          this.hx.huaxingRun8=true;
        }
    },
    joinArrs(Dobj){
      //配套设施功能 更多——将服务器请求到的数据 变成数组操作
      let tubiaoArr=String(Dobj.boyu_tubiao).split(',');
      let biaotiArr=String(Dobj.boyu_biaoti).split(',');
      for(let i = 0; i　< tubiaoArr.length; i++) {
        let data ={};
        data.id = i;
        data.img= tubiaoArr[i];
        data.text = biaotiArr[i];
        this.arrr.push(data);
      }
    },
    //3.门店其它户型，点击图片跳转到自身detail
    jumpToDetail(newHid){
      this.$router.push({
        path:'/detail',
        // name:'detail',
        query:{hid:newHid}
      });
    }
  },
  mounted(){
    // 1.从其他页面跳转至本页时，根据上个页面路由传参的id,发送 get /detail 请求获取数据
    this.axios.get("/detail",{
      params:{
        boyu_hid:this.$route.query.hid,
      }
    }).then((res) => {
      this.Dobj=res.data.results[0];//对象形式
      let imageArr=this.Dobj.boyu_image.split(',')[0]
      //调用joinArrs函数——将服务器数据 变为数组
      this.joinArrs(this.Dobj)
      //2.从其他页面跳转至本页时，get /detail提取到门店数据，根据门店数据向boyu_qhouse表获取同一门店其它户型数据
      let qstore=this.Dobj.boyu_title;
      this.axios.get('/mendian_other',{
        params:{
          boyu_qstore:qstore,
        }
      }).then((res)=>{
        this.Other_obj=res.data.results;
      })
      //2.从其他页面跳转至本页时，get /detail提取到门店数据，根据门店数据向boyu_qhouse表获取该门店下户型数
      this.axios.get('/detailNum',{
        params:{
          boyu_qstore:qstore,
        }
      }).then((res2)=>{
        this.detailNum=res2.data.results[0].num;
      })
    });
    
  }
}
</script>
<style scoped>
/* 内容区域统一样式 */
.content{
  padding:50px 15px 0;
}
p{
  font-size: 12px;
}
/* 22222222.轮播图 */
/* 222222.点击时 */
.tabnav hr{
  position: absolute;
  bottom: -5px;
  left: 19px;
  transition: all 0.3s ease;
}
/* 控制hr移动 */
/* 0 30 110 182 255 320 393 */
.run1{
  color:orange;
  transform: translate(0px);
}
.run2{
  color:orange;
  transform: translate(50px);
}
.run3{
  color:orange;
  transform: translate(110px);
}
.run4{
  color:orange;
  transform: translate(182px);
}
.run5{
  color:orange;
  transform: translate(255px);
}
.run6{
  color:orange;
  transform: translate(320px);
}
.run7{
  color:orange;
  transform: translate(393px);
}
.run8{
  color:orange;
  transform: translate(460px);
}
/* 控制划行内容移动 */
.huaxingRun1 li:nth-child(1){
  color: orange;
}
.huaxingRun2 li:nth-child(2){
  color: orange;
}
.huaxingRun3 li:nth-child(3){
  color: orange;
}
.huaxingRun4 li{
  transition: transform 0.3s ease;
  transform: translate(-47px);
}
.huaxingRun4 li:nth-child(4){
  color: orange;
}
/* 调控hr */
.huaxingRun4 .run4{
  color:orange;
  transform: translate(136px);
}
.huaxingRun5 li{
  transition: transform 0.3s ease;
  transform: translate(-116px);
}
.huaxingRun5 li:nth-child(5){
  color: orange;
}
.huaxingRun5 .run5{
  color:orange;
  transform: translate(138px);
}
.huaxingRun6 li{
  transition: transform 0.3s ease;
  transform: translate(-176px);
}
.huaxingRun6 li:nth-child(6){
  color: orange;
}
.huaxingRun6 .run6{
  color:orange;
  transform: translate(144px);
}
.huaxingRun7 li{
  transition: transform 0.3s ease;
  transform: translate(-176px);
}
.huaxingRun7 li:nth-child(7){
  color: orange;
}
.huaxingRun7 .run7{
  color:orange;
  transform: translate(216px);
}
.huaxingRun8 li{
  transition: transform 0.3s ease;
  transform: translate(-176px);
}
.huaxingRun8 li:nth-child(8){
  color: orange;
}
.huaxingRun8 .run8{
  color:orange;
  transform: translate(282px);
}
/* 22222222.未点击时 */
.swipeBox{
  position: relative;
  width: 100%;
  height: 258px;
  margin: 0 auto;
  border-radius: 6px;
  overflow: hidden;
}
.tabnav{
  width: 94%;
  height: 30px;
  background-color: #ccc;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  position: absolute;
  bottom: 0px;
  left: 3%;
  line-height: 30px;
  font-size: 12px;
  color: #666;
}
.tabnav .huaxing{
  background-color: #fff;
  width: 100%;
  height: 30px;
  position: relative;
  /* 划行效果 */
  display: -webkit-box;
  overflow-x: auto;
  /*适应苹果*/
  -webkit-overflow-scrolling:touch;
}
 /*隐藏掉滚动条*/
.huaxing::-webkit-scrollbar {
  display: none;
}
.tabnav li{
  float: left;
  padding:3px 15px;
}
/* 22222222.轮播图结束 */
/* 温馨舒适小开间 */
.smBay span{
  padding-right: 20px;
  color: #666;
}
.smBay .biaoqian{
  border: 1px solid #bbb;
  padding: 2px;
  margin-right: 5px;
  color: #bbb;
}
.smBay .spanPrice{
  float:right;
  padding: 0;
}
.spanPrice span{
  padding: 0px;
}
.smBay i{
  color:orange;
  font-size:18px;
  margin-right: 5px;
}
.smBay p{
  margin-top: -8px;
}
/* 查看介绍小链接 */
.ckjs{
  color: #888;
  font-size: 12px;
  float: right;
}
/* 配套设施功能 更多 和 周边介绍功能 查看介绍公用样式*/
.van-grid-item__text{
  font-size: 14px!important;
  color: red;
}
.popup_content{
  padding: 0 15px;
  position:relative;
  height: 100%;
}
.popup_content .contentHeader{
  position: fixed;
  left: 0;
  bottom: 555px;
  width: 100%;
  height: 42px;
  line-height: 42px;
  background-color: #fff;
}
.popup_content .More{
  position: fixed;
  left: 0;
  bottom: 341px;
  z-index: 1;
}
.contentHeader span{
  position: absolute;
  left: 15px;
  top: 0px;
  font-size: 22px;
  font-weight: 400;
  color: #888;
}
.popup_content h3{
  display: block;
  margin:0px auto; 
  text-align:center;
}
.popup_content .contentCenter{
  padding: 42px 0 80px 0;
}
.contentCenter img{
  width: 16px;
  height: 16px;
}
.popup_content .contentFoot{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: #fff;
}
.popup_content .button{
 width: 90%;
 height: 50px;
 margin: 15px auto;
 background-color: orangered;
 border-radius: 5px;
 text-align: center;
 color: #fff;
 line-height: 50px;
}
/* 门店户型划行区域样式 */
ul,li{
  list-style: none;
}
.slide-box{
  display: -webkit-box;
  overflow-x: auto;
  /*适应苹果*/
  -webkit-overflow-scrolling:touch;
}
  /*隐藏掉滚动条*/
.slide-box::-webkit-scrollbar {
  display: none;
}
.slide-box{
  padding:0 15px;
}

.slide-box li:last-child{
  padding-right: 15px;
}
.slide-item{
  width: 47%;
  height: 310px;
  margin: 0 5px;
}
.huaxing h3{
  padding: 0 15px;
}
.huaxing p{
  margin: 0;
}
.huaxing .title{
  font-weight: 700;
  margin-top: 8px;
  margin-bottom: 4px;
}
.huaxing .price span{
 color: orangered;
}
.huaxing .art{
  /* 字体太小无效 */
  font-size: 8px;
  color: #888;
}
.huaxing .img-items{
  border-radius: 6px;
  overflow: hidden;
  width: 162px;
  height: 121px;
}
/* 底部菜单 */
.foot{
  position: fixed;
  bottom: 0px;
  left: 0px;
  /* 电话咨询功能 弹出 遮盖层盖不住顶部导航，它和底部菜单都固定定位了因此修改z-index */
  z-index: 1;
  display: block;
  width: 100%;
  height: 75px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  box-shadow: 0px 0px 15px #ccc;
  overflow: hidden;
  background-color: #fff;
}
.foot>div{
  float: left;
  margin: 10px 18px;
  text-align: center;
}
.foot p{
  margin: 0px;
  color: #888;
  font-size: 12px;
}
.foot .routerLink{
  text-align:center;
  display: inline-block;
  width: 72%;
  height: 38px;
  line-height: 40px;
  background: orangered;
  color: #fff;
  font-size: 12px;
  border-radius: 5px;
  position: absolute;
  top: 10px;
  right: 15px;
}
/* 底部电话咨询功能  */
.popup_content_Tel div{
  height: 45px;
  line-height: 45px;
  font-size: 21px;
  color: blue;
  background-color:#fff;
  border-radius: 8px;
  margin: 10px 10px 0px 10px;
}
.popup_content_Tel div:first-child{
  position: relative;
}
.popup_content_Tel span{
  position: absolute;
  top: 7px;
  left: 32px;
}
/* 覆盖源代码 遮盖层样式-----------------------------------------失败 */
/* .styleTel .van-overlay{
 background-color: yellow!important;
} */
.styleTel .van-popup{
  background-color: transparent;
}
.test{
  background-color: red;
}
</style>